<template>
    <div class="divBox">
        <el-card class="box-card">
            <el-table v-loading="listLoading"   ref="TableRef"  :data="tableData" size="mini" class="table" row-key="cityId"
                highlight-current-row border lazy :load="load" :header-cell-style="{ fontWeight: 'bold' }"
                        :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
                <el-table-column prop="cityId" label="编号" min-width="100" />
                <el-table-column prop="parentName" label="上级名称" min-width="100">
                    <!-- <div>{{ parentName }}</div> -->
                </el-table-column>
                <el-table-column prop="name" min-width="250" label="地区名称">
                </el-table-column>
                <el-table-column fixed="right" min-width="80" :label="$t('操作')">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editCity(scope.row)"
                            v-hasPermi="['admin:system:city:update']">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <parser v-if="formShow" :form-conf="formConf" :form-edit-data="formData" :is-edit="isCreate === 1"
                @submit="submit" />
        </el-dialog>
    </div>
</template>
  
<script>
import parser from '@/components/FormGenerator/components/parser/Parser'
import * as systemFormConfigApi from '@/api/platform/cityList.js'
//   import * as systemFormConfigApi from '@/api/systemFormConfigApi.js'
import { Debounce } from '@/utils/validate'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
    name: 'CityList',
    components: { parser },
    data() {
        return {
            // 表单
            formConf: { fields: [] },
            // 生成表单id
            formId: 70,
            tableData: [],
            // 上级名称
            parentName: '日本',
            // 父级城市id
            parentId: 0,
            loading: false,
            listLoading: false,
            dialogVisible: false,
            // 选中id
            editId: 0,
            formShow: false,
            formData: {},
            isCreate: 0,
        }
    },
    created() {
        this.getCityList()
    },
    methods: {
        // 获取城市数据
        getCityList() {
            console.log('执行了');
            this.listLoading = true
            systemFormConfigApi.cityList({
                parentId: this.parentId
            }).then(res => {
                let data = res.data
                this.listLoading = false
                let arr = [];
                data.forEach((item) => {
                    let str = {};
                    str = item;
                    str.hasChildren = true;
                    str.parentName = '日本';
                    arr.push(str);
                });
                this.tableData = arr;
            })
        },
        // 状态
        cityStatus(e) {
            systemFormConfigApi.updateStatus({
                id: e.id,
                cityId: e.cityId,
                status: e.isShow
            }).then(res => {
                this.$message.success(this.$t('操作成功'))
            }).catch(() => {
                e.isShow = !e.isShow
            })
        },
        // 编辑
        editCity(item) {
            console.log(item);
            this.$confirm('请勿频繁修改此配置项', '提示', {
                confirmButtonText: '确定修改',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.editId = item.id
                this.parentId = item.parentId;

                this.formShow = false
                this.isCreate = 0
                this.getCityInfo()
                this.dialogVisible = true
                let content = '{ "formRef": "elForm", "formModel": "formData", "size": "medium", "labelPosition": "right", "labelWidth": 100, "formRules": "rules", "gutter": 15, "disabled": false, "span": 24, "formBtns": true, "fields": [{ "__config__": { "label": "上级名称", "labelWidth": null, "showLabel": true, "changeTag": true, "tag": "el-input", "tagIcon": "input", "required": false, "layout": "colFormItem", "span": 24, "document": "https://element.eleme.cn/#/zh-CN/component/input", "regList": [] }, "__slot__": { "prepend": "", "append": "" }, "__vModel__": "parentName", "placeholder": "上级名称", "style": { "width": "100%" }, "clearable": true, "prefix-icon": "", "suffix-icon": "", "maxlength": 11, "show-word-limit": false, "readonly": true, "disabled": false }, { "__config__": { "label": "名称", "labelWidth": null, "showLabel": true, "changeTag": true, "tag": "el-input", "tagIcon": "input", "required": true, "layout": "colFormItem", "span": 24, "document": "https://element.eleme.cn/#/zh-CN/component/input", "regList": [], "formId": 109, "renderKey": 1589790937111 }, "__slot__": { "prepend": "", "append": "" }, "placeholder": "请输入名称", "style": { "width": "100%" }, "clearable": true, "prefix-icon": "", "suffix-icon": "", "maxlength": "20", "show-word-limit": false, "readonly": false, "disabled": false, "__vModel__": "name" }] }'
                this.formConf = JSON.parse(content)

            })
        },
        // 详情
        getCityInfo() {
            systemFormConfigApi.cityInfo({
                id: this.editId
            }).then(res => {
                this.isCreate = 1
                this.formData = res.data
                this.formData.parentName = this.parentName
                setTimeout(() => { // 让表单重复渲染待编辑数据
                    this.formShow = true
                }, 80)
            })
        },
        submit: Debounce(function (data) {
            const param = {
                id: this.editId,
                parentId: this.parentId,
                name: data.name
            }
            systemFormConfigApi.cityUpdate(param).then(res => {
                this.$message.success('修改成功')
                this.dialogVisible = false
                this.getCityList()
            })
        }),
        //  关闭模态框
        handleClose(done) {
            this.formConf.fields = []
            this.dialogVisible = false
        },
        load(tree, treeNode, resolve) {
            systemFormConfigApi.cityList({
                parentId: tree.cityId,
            }).then(res => {
                let data = res.data
                let arr = [];
                data.forEach((item) => {
                    let str = {};
                    str = item;
                    str.hasChildren = true; //给每个省市节点赋一个可展开的值
                    str.parentName = tree.name
                    this.parentName = tree.name
                    if (item.level == 2) {
                        str.hasChildren = false;//当节点为三级时，不可展开
                    }
                    arr.push(str);
                });
                resolve(arr)
            })
        }
    }
}
</script>
  
<style lang="scss" scoped>
.el-icon-plus {
    margin-right: 5px;
}

.demo .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}

/*打开时文字位置设置*/
.demo .el-switch__label--right {
    z-index: 1;
}

/*关闭时文字位置设置*/
.demo .el-switch__label--left {
    z-index: 1;
    left: 19px;
}

/*显示文字*/
.demo .el-switch__label.is-active {
    display: block;
}

.demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 60px !important;
}
</style>
  